<template>
	<div class="bim-drawer" :class="!visible ? '' : 'bim-drawer-open'">
		<div class="bim-drawer-mask"></div>
		<div class="bim-drawer-left" :style="{'transform': !visible ? 'translateX(-100%)' : '', width: 'auto'}">
			<div class="tower-flex">
				<div class="tower-wrapper site-base-bg">
					<div class="tower-list">
						<button
								class="bim-btn bim-btn-tower"
								:class="item.number === tower_number ? 'active' : ''"
								v-for="item in towerListData"
								:key="item.number"
								@click="changeTower(item.number)"
						>{{ item.name }}</button>
					</div>
				</div>
			</div>
		</div>
		<div class="bim-drawer-right">
			<div class="bim-drawer-content-wrapper site-base-bg">
				<div class="bim-drawer-content">
					<div class="bim-drawer-wrapper-body">
						<div class="bim-drawer-body">
							<div class="main-content-drawer">
								<div class="line-block-placeholder"></div>
								<div class="tower-monitor">
									<div class="header-block">
										<h3 class="box-title">塔吊</h3>
									</div>
									<div class="tower-stream">
										<video src="http://demo-dev.sadpu.com/uploads/media/tower-model.mp4" loop="loop" autoplay="autoplay" width="500px"></video>
									</div>
									<div class="line-block-placeholder"></div>
									<div class="tower-detail" v-loading="listLoading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
										<div class="td-block">
											<div class="td-item">设备号n（Number）{{ towerDetail.number }}</div>
											<div class="td-item">高度m（Height）{{ towerDetail.height }}</div>
											<div class="td-item">幅度m（Range）{{ towerDetail.range }}</div>
											<div class="td-item">力矩%（Moment）{{ towerDetail.moment }}</div>
											<div class="td-item">承重量t（Weight）{{ towerDetail.weight }}</div>
											<div class="td-item">倾角 °（Dip）{{ towerDetail.dip_angle }}</div>
											<div class="td-item">是否在线（Online or not ）{{ towerDetail.online === 1 ? '是' : '否' }}</div>
										</div>
										<div class="td-block">
											<div class="td-item">回转角度 °（Rotation）</div>
											<div class="angle-model">
												<div class="am-pic" :style="{'transform': 'rotate(' + towerDetail.angle +'deg)'}"></div>
												{{ towerDetail.angle }}
											</div>
										</div>
									</div>
								</div>
								<div class="line-block-placeholder"></div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
export default {
	data() {
		return {
			visible: false,
			towerDetail: {
				number: 0,
				height: 0,
				range: 0,
				moment: 0,
				weight: 0,
				wind_speed: 0,
				dip_angle: 0,
				online: 0
			},
			interval: null,
			listLoading: true,
			tower_number: '',
			towerListData: []
		}
	},
	created() {
		const _self = this
		_self.getTowerListData()
		_self.socketInit()
		_self.interval = setInterval(() => {
			if (!_self.visible) {
				_self.visible = true
			}
			clearInterval(_self.interval)
		}, 500)
	},
	beforeDestroy() {
		this.over()
		if (this.interval) {
			clearInterval(this.interval)
		}
	},
	methods: {
		getTowerListData () {
			this.$http.get('/api/get_devices', { params: { device_type: 'tower' } }).then(res => {
				this.towerListData = res.data.data
				this.tower_number = res.data.data[0].number
			})
		},
		changeTower (number) {
			this.tower_number = number
			this.listLoading = true
			this.towerDetail = {}
		},
		socketInit () {
			let ws = new WebSocket(this.$wsUrl)
			ws.onmessage = evt => {
				// console.log('数据已接收...')
				/* eslint-disable no-eval */
				const res = eval('(' + evt.data + ')')
				if (res.module === 'tower' && res.data.number === this.tower_number) {
					if (res.state === 'empty') return
					this.towerDetail = res.data
					this.listLoading = false
				}
			}
			ws.onclose = function () {
				// console.log('连接已关闭...')
			}
			this.over = () => {
				ws.close()
			}
		}
	}
}
</script>
<style lang="scss" scoped>
.tower-flex{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
.tower-wrapper{
	position: relative;
	width: 100%;
	border-top: 2px solid #537393;
	border-bottom: 2px solid #537393;
	border-right: 3px solid #537393;
	z-index: 1;
	&:before{
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		background-color: rgba(41, 77, 115, 0.6);
		z-index: -1;
	}
}
.tower-list {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	padding: 42px 35px;
}
.bim-btn-tower {
	width: 168px;
	height: 36px;
	text-align: left;
	padding-left: 35px;
	& + & {
		margin-top: 20px;
	}
}
.tower-stream {
	padding: 44px 31px;
}
.tower-detail {
	display: flex;
	color: #a7c7e1;
	font-size: 18px;
}
.td-block {
	//width: 50%;
	padding: 30px 10px 30px  0;
	& + & {
		border-left: 1px dashed #6f90b6;
		padding: 30px 0 30px 20px;
	}
}
.td-item {
	position: relative;
	padding-left: 8px;
	line-height: 28px;
	& + & {
		margin: 20px 0 0;
	}
	&::before {
		content: '';
		position: absolute;
		border-left: 2px solid #a7c7e1;
		height: 16px;
		left: 0;
		top: 6px;
	}
}
.angle-model {
	display: flex;
	margin: 20px 0;
	.am-pic {
		background: url("../../assets/angle.png") no-repeat;
		width: 114px;
		height: 114px;
		margin-left: 12px;
		transition: transform .8s ease-in;
	}
}
.td-danger {
	margin-top: 20px;
	p {
		color: #e24b33;
		margin-bottom: 12px;
	}
}
.stream-button-group {
	button {
		width: 76px;
		height: 36px;
		margin-right: 20px;
	}
}
</style>
